<template>
  <div class="home-index">
    <div style="width: calc(100vw); height: calc(100vh); background: url(../../../static/bg.png) no-repeat; background-size: 100% 100%; overflow: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative;">
      <div :style="{ width: (558 / 96) + 'rem', background: 'url(../../../static/login_bg.png) no-repeat', backgroundSize: '100% 100%', opacity: 1, borderRadius: (15 / 96) + 'rem', position: 'absolute', top: '25.5%', right: '10.5%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
          <div :style="{ marginTop: (65 / 96) + 'rem', marginBottom: (60 / 96) + 'rem', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }">
            <span :style="{ fontSize: (48 / 96) + 'rem', fontFamily: 'FZXiaoBiaoSong-B05, KaiTi', fontWeight: '400', color: 'rgba(255, 255, 255, 0.9)' }">欢迎登录</span>
          </div>
          <div :style="{ width: (410 / 96) + 'rem', height: (66 / 96) + 'rem', background: 'rgba(49, 52, 116, 0.5)', border: (1 / 96) + 'rem solid #3641F9', boxShadow: '0rem ' + (4 / 96) + 'rem ' + (8 / 96) + 'rem 0rem rgba(24, 25, 55, 0.43)', borderRadius: (30 / 96) + 'rem', marginBottom: (23 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
            <!-- <i class="iconfont iconicon_account" :style="{ marginLeft: (32 / 96) + 'rem', marginRight: (20 / 96) + 'rem', fontSize: (43 / 96) + 'rem', color: '#3641F9' }"></i> -->
            <div :style="{ width: (25 / 96) + 'rem', height: (28 / 96) + 'rem', marginLeft: (32 / 96) + 'rem', marginRight: (20 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
              <img style="width: 100%; height: 100%;" src="../../../static/user.png" />
            </div>
            <div :style="{ width: (280 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
              <input type="text" :style="{ width: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#CCCCCC', textAlign: 'left' }" placeholder="手机号/用户名" v-model="userName">
            </div>
          </div>
          <div :style="{ width: (410 / 96) + 'rem', height: (66 / 96) + 'rem', background: 'rgba(49, 52, 116, 0.5)', border: (1 / 96) + 'rem solid #3641F9', boxShadow: '0rem ' + (4 / 96) + 'rem ' + (8 / 96) + 'rem 0rem rgba(24, 25, 55, 0.43)', borderRadius: (30 / 96) + 'rem', marginBottom: (26 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
            <!-- <i class="iconfont iconmima" :style="{ marginLeft: (32 / 96) + 'rem', marginRight: (20 / 96) + 'rem', fontSize: (43 / 96) + 'rem', color: '#3641F9' }"></i> -->
            <div :style="{ width: (26 / 96) + 'rem', height: (29 / 96) + 'rem', marginLeft: (32 / 96) + 'rem', marginRight: (20 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
              <img style="width: 100%; height: 100%;" src="../../../static/mima.png" />
            </div>
            <div :style="{ width: (280 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
              <input :type="passwordType" :style="{ width: '100%', fontSize: (24 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#CCCCCC', textAlign: 'left' }" placeholder="密码" v-model="passWord">
            </div>
            <div @click="onPasswordClick" :style="{ width: (80 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
              <i v-if="!showPassword" class="iconfont iconguanbixianshi" :style="{ fontSize: (30 / 96) + 'rem', color: '#999999' }"></i>
              <i v-if="showPassword" class="iconfont iconxianshi" :style="{ fontSize: (30 / 96) + 'rem', color: '#999999' }"></i>
            </div>
          </div>
          <div :style="{ width: (410 / 96) + 'rem', marginBottom: (29 / 96) + 'rem', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', }">
            <div @click="onSelectClick" style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; cursor: pointer;">
              <i v-if="!selectType" class="iconfont iconweigouxuanv2" :style="{ fontSize: (26 / 96) + 'rem', color: '#3641F9', marginLeft: (23 / 96) + 'rem', marginRight: (8 / 96) + 'rem' }"></i>
              <i v-if="selectType" class="iconfont iconyigouxuan" :style="{ fontSize: (26 / 96) + 'rem', color: '#3641F9', marginLeft: (23 / 96) + 'rem', marginRight: (8 / 96) + 'rem' }"></i>
              <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                <span :style="{ fontSize: (18 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#CCCCCC' }">记住密码</span>
              </div>
            </div>
            <div style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center; cursor: pointer;" :style="{ marginRight: (23 / 96) + 'rem' }">
              <span :style="{ fontSize: (18 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#CCCCCC' }">忘记密码？</span>
            </div>
          </div>
          <div @click="toLoginClick" :style="{ width: (192 / 96) + 'rem', height: (62 / 96) + 'rem', background: 'linear-gradient(90deg, #303483, #1C1F51)', marginBottom: (74 / 96) + 'rem', boxShadow: '0rem ' + (4 / 96) + 'rem ' + (8 / 96) + 'rem 0rem rgba(24, 25, 55, 0.43)', borderRadius: (30 / 96) + 'rem', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', cursor: 'pointer' }">
            <span :style="{ fontSize: (30 / 96) + 'rem', fontFamily: 'FZKai-Z03S, KaiTi', fontWeight: '400', color: '#FFFFFF' }">登录</span>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import { Base64 } from 'js-base64'
  import Axios from 'axios'
  import {pageResize} from '../../utils/resetScreenSize.js'
  import commonUtil from '../../utils/common'
  import { SET_USER_INFO } from '../../vuex/mutations-types'
  export default {
    name: 'Login',
    components: {

    },
    data () {
      return {
        userName: "",
        passWord: "",
        selectType: false,
        showPassword: false,
        passwordType: "password"
      }
    },
    mounted() {
      pageResize();
    },
    created() {
      // 在页面加载时从cookie获取登录信息
      let userName = this.getCookie("userName");
      let passWord = Base64.decode(this.getCookie("passWord"));
      // 如果存在赋值给表单，并且将记住密码勾选
      if(userName) {
        this.userName = userName;
        this.passWord = passWord;
        this.selectType = true;
      }
    },
    methods: {
      onSelectClick() {
        this.selectType = !this.selectType;
      },
      toLoginClick() {
        // // 点击登陆向后台提交登陆信息
        // // axios.post("url",this.loginForm).then(res => {
        // //   // 储存token（需要封装拦截器，将token放入请求头中）
        // //   this.setCookie('token',res.token);
        // //   // 跳转到首页
        // //   this.$router.push('/Index');
        // //   // 储存登录信息
        // //   this.setUserInfo();
        // // });
        // if(!commonUtil.trim(this.userName)) {
        //   this.$toast("请输入手机号/用户名");
        //   return;
        // }
        // if(!commonUtil.trim(this.passWord)) {
        //   this.$toast("请输入密码");
        //   return;
        // }
        // // 接口调用
        // let userInfo = {};
        // let jsons = {
        //   mobile: commonUtil.trim(this.userName),
        //   password: commonUtil.trim(this.passWord),
        //   isJson: true
        // };
        // this.$http.post('/login/pwdLogin', jsons).then((res) => {
        //   // console.log("res: ", res);
        //   // console.log("res: ", res.code);
        //   if(res.code == 200) {
        //     userInfo = {
        //       openid: res.data.openid,
        //       mobile: res.data.mobile,
        //       birthday: res.data.birthday,
        //       createDtm: res.data.createDtm,
        //       del: res.data.del,
        //       email: res.data.email,
        //       face: res.data.face ? res.data.face : "../../static/league_match_logo.png",
        //       fansNum: res.data.fansNum,
        //       followNum: res.data.followNum,
        //       height: res.data.height,
        //       id: res.data.id,
        //       individual: res.data.individual,
        //       introduction: res.data.introduction,
        //       isNewUser: res.data.isNewUser,
        //       nickname: res.data.nickname,
        //       realName: res.data.realName,
        //       realNameAuthenticationStatus: res.data.realNameAuthenticationStatus,
        //       selfInviteCode: res.data.selfInviteCode,
        //       sex: res.data.sex,
        //       status: res.data.status,
        //       token: res.data.token,
        //       topicNum: res.data.topicNum,
        //       updateDtm: res.data.updateDtm,
        //       userCode: res.data.userCode,
        //       username: res.data.username,
        //       weight: res.data.weight
        //     }
        //     localStorage.setItem("userInfo", JSON.stringify(userInfo));
        //     this.setUserInfo();
        //     let getUserInfo = localStorage.getItem("userInfo");
        //     if(getUserInfo) {
        //       this.$router.replace({ name: 'MainPage' });
        //     }
        //   } else {
        //     this.$toast(res.msg);
        //   }
        // }).catch(e => {
        //   // console.log("e: ", e);
        // });
        this.$router.replace({ name: 'MainPage' });
      },
      // 储存表单信息
      setUserInfo() {
        // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
        // 如果没有勾选，储存的信息为空
        if(this.selectType){
          this.setCookie("userName",this.userName)
          // base64加密密码
          let passWord = Base64.encode(commonUtil.trim(this.passWord))
          this.setCookie("passWord",passWord)
        }else{
          this.setCookie("userName", "")
          this.setCookie("passWord", "")
        }
      },
      // 获取cookie
      getCookie(key) {
        if (document.cookie.length > 0) {
          var start = document.cookie.indexOf(key + '=');
          if (start !== -1) {
            start = start + key.length + 1;
            var end = document.cookie.indexOf(';', start);
            if (end === -1) {
              end = document.cookie.length;
            }
            return unescape(document.cookie.substring(start, end));
          }
        }
        return '';
      },
      // 保存cookie
      setCookie(cName, value, expiredays) {
        var exdate = new Date()
        exdate.setDate(exdate.getDate() + expiredays)
        document.cookie = cName + '=' + decodeURIComponent(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
      },
      onPasswordClick() {
        this.showPassword = !this.showPassword;
        if(this.showPassword) {
          this.passwordType = "text";
        }
        if(!this.showPassword) {
          this.passwordType = "password";
        }
      }
    },
    activated () {
      window.document.title = '登录';
    }
  }
</script>

<style scoped>
  .home-index {

  }
  .match-title-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .match-title {
    font-family: SimHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.95);
  }
</style>
